All files / src/routes/workout/[id]/_components PrescribedExerciseCard.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import Card from '$lib/components/Card.svelte';
	import SetsTable from './SetsTable.svelte';
	import type { PrescribedExerciseView, SetLogView } from '../+page.server';
	import type { Enums } from '@strengthsys/shared';
 
	// Single source of truth is the DB `workout_status` enum (via @strengthsys/shared);
	// values propagate through `gen:types`, so this never needs hand-editing on enum change.
	type WorkoutStatus = Enums<'workout_status'>;
 
	interface Props {
		exercise: PrescribedExerciseView;
		status: WorkoutStatus;
		workoutLogId: string | null;
		loggedSetMap: Map<number, SetLogView>;
	}
 
	let { exercise, status, workoutLogId, loggedSetMap }: Props = $props();
</script>
 
<Card>
	<div class="exercise-card">
		<h3 class="exercise-card__name" data-testid="workout-detail-exercise-name">
			{exercise.exercise_name}
		</h3>
		{#if Iexercise.notes}
			<p class="exercise-card__notes" data-testid="workout-detail-exercise-notes">
				{exercise.notes}
			</p>
		{/if}
		{#if Iexercise.sets.length > 0}
			<SetsTable
				sets={exercise.sets}
				{status}
				prescribedExerciseId={exercise.id}
				{workoutLogId}
				{loggedSetMap}
			/>
		{:else}
			<p class="exercise-card__no-sets">No sets prescribed.</p>
		{/if}
	</div>
</Card>
 
<style>
	.exercise-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}
 
	.exercise-card__name {
		margin: 0;
		font-size: 16px;
		font-weight: 600;
	}
 
	.exercise-card__notes {
		margin: 0;
		font-size: 14px;
		color: var(--ink-soft);
		font-style: italic;
	}
 
	.exercise-card__no-sets {
		margin: 0;
		font-size: 14px;
		color: var(--ink-soft);
	}
</style>